<template>
  <div class="app-container">
    <!-- 头部输入框 -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="lession_id" placeholder="请输入课程号"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="lession_name" placeholder="请输入课程名称"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select v-model="semester_id" placeholder="请选择学期">
          <el-option v-for="(item,index) in semester" :label="item.semester_name" :value="item.unid"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="grade" placeholder="请选择年级" disabled>
          <el-option v-for="(item,index) in PayLessionList" :label="item.lession.grade" :value="item.lession.grade"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="PayLessionInfos">查询</el-button>
        <el-button @click="rest">重置</el-button>
      </el-col>
    </el-row>
    <!-- 表格分类导航 -->
    <div class="bar">
      <div class="typeBar" @click="barType(index)" :style="{'border-bottom':barBtn == index?'3px green solid':''}" v-for="(item,index) in queryType">{{item}}</div>
    </div>
    <el-button class="addBtn" type="primary" @click="showAdd = !showAdd">新增收费项</el-button>
    <!-- 表格 -->
    <table-data :PayLessionList="PayLessionList" :semester="semester" :queryFun="PayLessionInfos"></table-data>
    <!-- 页码切换 -->
    <div class="bottomPaginationaa">
    	<el-pagination :current-page.sync="searchCLassRoomQueryInfo.page" :page-sizes="[6, 10, 15]" :page-size="searchCLassRoomQueryInfo.limit"
    	 layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 新增收费项弹窗 -->
    <el-dialog title="新增收费项" :visible.sync="showAdd">
      <add-dig :semester="semester" :queryFun="PayLessionInfos"></add-dig>
    </el-dialog>
  </div>
</template>

<script>
  import { queryLession,queryPayLession,selectPayLession,querySemesterList,queryLessionList,queryLessionById,addPayLession,queryTeachById,getPayItem,queryTeach } from '@/api/studentRecruit.js'
  import { getSessionInfo, delSessionInfo } from '@/utils/auth'
  import addDig from './components/addPayLession.vue'
  import tableData from './components/tableData.vue'
  import store from '../../store'
  export default {
    name: 'index',
    components:{
      addDig,
      tableData
    },
    data() {
      return {

        searchCLassRoomQueryInfo: {
        	page: 1,
        	limit: 10,// 每页显示数量
        }, //分页参数
        total:0,
        showAdd:false, //新增收费项弹窗状态
        queryType:['全部课程','未定价课程','停用课程'], //表格导航
        mo:123,
        barBtn:0, //表格导航状态
        PayLessionList:[], //分页查询 - 收费课程
        lession_id:null, //条件课程号查询
        lession_name:null, //条件课程名查询
        semester_id:null, //条件学期名查询
        grade:null, //条件年级查询
        semester:null, //学期
      }
    },
    created() {
      //分页查询 - 收费课程
      this.PayLessionInfos()
      //获取所有学期
      this.getSem()
    },
    methods: {
      // 处理分页切换
      handleSizeChange(val) {
      	this.searchCLassRoomQueryInfo.limit = val
      	this.searchClassRoomList()
      },
      handleCurrentChange(val) {
      	this.searchCLassRoomQueryInfo.page = val
      	this.searchClassRoomList()
      },
      //重置
      rest(){
        this.lession_id = null
        this.lession_name = null
        this.semester_id = null
        this.grade = null
        this.PayLessionInfos()
      },
      close(){
        this.showAdd = false
      },
      //分页查询 - 收费课程
      async PayLessionInfos(){
        let resData = {
          lession_id:this.lession_id,
          lession_name:this.lession_name,
          semester_id:this.semester_id,
          grade:this.grade
        }
        let Data = await queryPayLession(resData)
        if(Data.code == 200){
          this.PayLessionList = Data.data.list
          this.total = Data.data.total
          console.log('分页查询 - 收费课程',this.PayLessionList);
        }else{
          this.PayLessionList = []
        }
      },
      //获取学期
      async getSem(){
        let resData = {}
        let data = await querySemesterList(resData)
        if(data.code == 200){
          this.semester = data.data
        }
      },
      async barType(index){
        this.barBtn = index
        let resData = {}
        switch (index){
          //全部课程
          case 0:
            break;
          //未定价课程
          case 1:
          this.PayLessionList = null
            break;
          //停用课程
          case 2:
          resData.status = 2
            break;
          default:
            break;
        }
        if(index!=1){
          let Data = await queryPayLession(resData)
          this.PayLessionList = Data.data.list
        }
      }
    }
  }
</script>

<style scoped>
  .bottomPaginationaa {
  	display: flex;
  	justify-content: center;
  	align-items: flex-end;
  	margin-top: 40px;
  }
  .bar{
    display: flex;
    justify-content: space-between;
    width: 240px;
    flex-direction: row;

  }
  .typeBar{
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .addBtn{
    margin-top: 20px;
    margin-bottom: 20px;
  }
</style>
